<template>
	<div class="scroll-tab">
		<div class="tab-wrapper" ref="wrapperRef">
			<div class="tab">
				<div class="tab-item" v-for="(item,index) in tabs"
				     :key="index"
				     :ref="el=>items[index]=el"
				     @click="clickTabItem(index)">
					{{ item.name }}
				</div>
				<div class="indicator" ref="indicatorRef" :style="indicatorStyle"></div>
			</div>
		</div>
	</div>
</template>

<script>
    import {ref, reactive, onMounted, nextTick} from 'vue'
    import domUtil from '/src/utils/js/dom-util'
    import Velocity from 'velocity-animate'

    export default {
        name: "ScrollTab",
        props: {
            tabs: Array,
            initialIndex: {
                type: Number,
                default: 0
            },
            onTabItemClick: Function
        },
        setup(props) {
            const {initialIndex, onTabItemClick} = props
            const wrapperRef = ref()
            const indicatorRef = ref()
            const items = ref([])
            const indicatorStyle = reactive({
                left: '0px',
                width: '0px'
            })
            let isAnimation = false
            const curIndex = ref(initialIndex);
            const normalColorArr = [51, 51, 51];//未选中的颜色rgb
            const checkedColorArr = [255, 88, 120];//选中的颜色rgb
            const init = () => {
                setScrollProgress(1, items.value[curIndex])
            }
            const clickTabItem = (index) => {
                if (isAnimation || curIndex.value === index) {
                    return
                }
                onTabItemClick(index)
                const curItem = items.value[curIndex.value];
                const targetItem = items.value[index];
                Velocity(indicatorRef.value, {tween: [1, 0]},
                    {
                        duration: 250,
                        begin() {
                            isAnimation = true
                        },
                        progress(elements, complete, remaining, start, tweenValue) {
                            setScrollProgress(tweenValue, curItem, targetItem)
                        },
                        complete() {
                            setCurIndex(index)
                            isAnimation = false
                        }
                    }
                )
            }

            const setItemVisible = (index, isLeft) => {
                const tabItem = items.value[index];
                if (isLeft) {
                    const marginLeft = parseInt(domUtil.getElementStyle(tabItem, 'marginLeft'))
                    const target = tabItem.offsetLeft - marginLeft;
                    if (target < wrapperRef.value.scrollLeft) {
                        wrapperRef.value.scrollLeft = target;
                    }
                } else {
                    const marginRight = parseInt(domUtil.getElementStyle(tabItem, 'marginRight'))
                    const target = tabItem.offsetLeft + tabItem.offsetWidth + marginRight - wrapperRef.value.offsetWidth
                    if (target > wrapperRef.value.scrollLeft) {
                        wrapperRef.value.scrollLeft = target;
                    }
                }
            }


            const changeColor = (el, startColor, endColor, progress) => {
                if (startColor && endColor) {
                    const r = startColor[0] + (endColor[0] - startColor[0]) * progress
                    const g = startColor[1] + (endColor[1] - startColor[1]) * progress
                    const b = startColor[2] + (endColor[2] - startColor[2]) * progress
                    el.style.color = `rgba(${r}, ${g}, ${b}, 1)`
                } else {
                    const targetColor = startColor || endColor
                    if (targetColor) {
                        el.style.color = `rgba(${targetColor[0]}, ${targetColor[1]}, ${targetColor[2]}, 1)`
                    }
                }
            }


            const setScrollProgress = (progress, startItem, endItem) => {
                if (startItem && endItem) {
                    indicatorStyle.left = (startItem.offsetLeft + (endItem.offsetLeft - startItem.offsetLeft) * progress) + 'px'
                    indicatorStyle.width = (startItem.offsetWidth + (endItem.offsetWidth - startItem.offsetWidth) * progress) + 'px'
                    changeColor(startItem, checkedColorArr, normalColorArr, progress)
                    changeColor(endItem, normalColorArr, checkedColorArr, progress)
                } else {
                    const targetItem = startItem || endItem;
                    if (targetItem) {
                        indicatorStyle.left = targetItem.offsetLeft + 'px'
                        indicatorStyle.width = targetItem.offsetWidth + 'px'
                        changeColor(targetItem, checkedColorArr)
                    }
                }

            }

            const setCurIndex = (index) => {
                if (curIndex.value < index) {
                    const nextIndex = index < items.value.length - 1 ? index + 1 : index
                    setItemVisible(nextIndex, false)
                } else {
                    const prevIndex = index > 0 ? index - 1 : index;
                    setItemVisible(prevIndex, true)
                }
                curIndex.value = index
            }

            const scrollTo = (index, progress) => {
                const targetIndex = progress > 0 ? index + 1 : index - 1
                const curItem = items.value[index];
                const targetItem = items.value[targetIndex];
                if (progress >= 0) {
                    setScrollProgress(progress, curItem, targetItem)
                } else {
                    setScrollProgress(1 + progress, targetItem, curItem)
                }
            }

            onMounted(() => {
                nextTick(init)
            })
            return {
                ...props,
                wrapperRef,
                items,
                indicatorRef,
                indicatorStyle,
                clickTabItem,
                scrollTo,
                setCurIndex
            }
        }

    }
</script>

<style lang="less" scoped>
	@import "/src/utils/style/color";
	
	.scroll-tab {
		font-size: 0;
		overflow: hidden;
		height: 40px;
		
		.tab-wrapper {
			overflow-x: scroll;
			overflow-y: hidden;
			height: 100px;
		}
		
		.tab {
			position: relative;
			display: inline-block;
			height: 40px;
			white-space: nowrap;
		}
		
		.tab-item {
			height: 40px;
			display: inline-block;
			line-height: 40px;
			font-size: 14px;
			color: @text-color;
			margin: 0 5px;
		}
		
		
		.indicator {
			height: 3px;
			border-radius: 1.5px;
			position: absolute;
			bottom: 0;
			background-color: @global;
		}
	}


</style>
